<template>
  <div>
    <van-search v-model="searchkey" placeholder="请输入关键词搜索" />
    <div style="display: flex;">
      <van-image width="100%" height="200px" src="../../../public/msg/avatar2.jpeg" fit="cover" />
    </div>
    <div>
      <div class="liveRoomInfo">
        <van-image round width="40" height="40" src="../../../public/msg/avatar2.jpeg" fit="cover" />
        <div class="liveRoomInfo-main" @click="toLive">
          <span style="font-size: 18px;" class="liveRoomInfo-main-name">
            小兵良品&nbsp;
            <van-image width="25" height="25" src="/src/assets/icons/live_sign_icon.png" />
          </span>
          <span style="color: #6f727c;">
            <span style="color: #0084ff;">20.51万</span> 用户 | <span style="color: #0084ff;">22.75千万</span>热度
          </span>
        </div>
        <div>
          <van-button round type="primary" size="small" plain @click="onClick">
            <van-icon name="plus" v-if="!isFollow" />
            <span v-if="!isFollow" style="font-weight: 700;">关注</span>
            <span v-else style="font-weight: 700;">已关注</span>
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="home">
import { useRouter } from 'vue-router'
const router = useRouter()
const searchkey = ref('')
const isFollow = ref(false)
function onClick() {
  isFollow.value = !isFollow.value
} 
function toLive(){
  router.push('/live')
}
</script>

<style lang="scss" scoped>
.liveRoomInfo {
  background-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 80px;

  .liveRoomInfo-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 16px;
    padding: 0 10px;

    .liveRoomInfo-main-name {
      display: flex;
      align-items: center;
    }

  }
}
</style>